import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
} from 'react-native';

export default class MyPage extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.backgroundContainer}>
                    <Image source={require('../img/landing-background.jpg')} resizeMode='cover' style={styles.backdrop} />
                </View>
                <View style={styles.overlay}>
                    <Text style={styles.headline}>It should appear in front of the Background Image</Text>
                    <Image style={styles.logo} source={require('../img/logo.png')} />
                </View>

                <View>
                    <Image style={{
                        flex: 1,
                        width: 200,
                        height: 200,
                        justifyContent: 'center',
                        alignItems: 'center', 
                        resizeMode: 'cover',
                    }}
                        source={require('../img/record.jpg')} >
                        <Image style={{
                            width: 100,
                            height: 100,
                            resizeMode: 'contain',
                        }}
                            source={require('../img/child.jpg')} />
                    </Image>
                </View>
            </View >

        );
    }
}

//样式定义
var styles = StyleSheet.create({
    backgroundContainer: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
    },
    container: {
        flex: 1,
        alignItems: 'center',
    },
    overlay: {
        opacity: 0.5,
        backgroundColor: '#000000'
    },
    logo: {
        backgroundColor: 'rgba(0,0,0,0)',
        width: 160,
        height: 52
    },
    backdrop: {
        flex: 1,
        flexDirection: 'column'
    },
    headline: {
        fontSize: 18,
        textAlign: 'center',
        backgroundColor: 'black',
        color: 'white'
    }
});